<!doctype html>
<html lang="en">
<head>
		<meta charset="UTF-8" />
		<title>购物车</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/shoppint_cart.css"/>
	</head>

		<body>
			<header class="mui-bar mui-bar-nav">
				<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">购物车</h1>
			</header>

			<div class="mui-content">
				<form action="" method="post">
					<!--收货地址-->
					<div class="address">
						<a href="shipping_address.html">
							<p>姓名：测试</p>
							<p>手机号：12345678910</p>
							<p>地址：中国 北京 东城区</p>
							<p>详细地址：天安门</p>
							<span class="mui-icon mui-icon-forward"></span>
						</a>
					</div>
						
					<!--商品列表-->
					<div class="goods_num">共<span id="g_num"> 2 </span>件</div>
					<ul class="mui-table-view goods_list">
					        <li class="mui-table-view-cell">
					        	<div><img src="img/1547826906a.jpg" alt="" /></div>
					        	<div class="goods">
					        		<div class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜</div>
					        		<div>
										单价：<span class="unit_price">585.00</span><br/>
										总价：<span class="total_price">585.00</span>
					        		</div>
					        	</div>
					        	
					        	<div class="mui-numbox">
					        	    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					        	    <input class="mui-input-numbox" type="number" name="goods_number[1]" value="1" readonly/>
					        	    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
					        	</div>
					        	
					        	<span class="mui-icon mui-icon-trash del"></span>
					        </li>
					        <li class="mui-table-view-cell">
					        	<div><img src="img/1547826906a.jpg" alt="" /></div>
					        	<div class="goods">
					        		<div class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜</div>
					        		<div>
										单价：<span class="unit_price">580.00</span><br/>
										总价：<span class="total_price">580.00</span>
					        		</div>
					        	</div>
					        	
					        	<div class="mui-numbox">
					        	    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					        	    <input class="mui-input-numbox" type="number" name="goods_number[2]" value="1" readonly/>
					        	    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
					        	</div>
					        	
					        	<span class="mui-icon mui-icon-trash del"></span>
					        </li>
					    </ul>
				</form>
			</div>
			<nav class="mui-bar mui-bar-tab">
				<div class="mui-tab-item mui-active">
					<span class="mui-tab-label">
			        	<div class="mui-input-row mui-radio mui-left">
			        	    <label>钛</label>
			        	    <input name="weizi" type="radio" checked>
			        	</div>
			        </span>
				</div>
				<div class="mui-tab-item">
					<span class="mui-tab-label">
			        	<div class="mui-input-row mui-radio mui-left">
			        	    <label>消费</label>
			        	    <input name="weizi" type="radio">
			        	</div>
			        </span>
				</div>
				<div class="mui-tab-item">
					<span class="mui-tab-label">￥<span id="all_price">666.00</span></span>
				</div>
				<div class="mui-tab-item">
					<span class="mui-tab-label"><button type="button" id="sub" class="mui-btn mui-btn-block">结算</button></span>
				</div>
			</nav>
			
			<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				mui.init()
				
				
				//计算总价
				let all_prices = ()=>{
					let all_num = 0;
					let goods_num = $('.mui-input-numbox').map((i,v)=>$(v).val())
					let unit_price = $('.unit_price').map((i,v)=>$(v).html())
					$.each(goods_num,i=>{
						let g_num = parseInt(goods_num[i])
						let u_num = parseFloat(unit_price[i])
						all_num += g_num*u_num
					});
					$('#all_price').html(all_num)
				}
				all_prices()
				
				
				$('.del').click(function(){
					let _this = $(this)
					mui.confirm('是否删除？','删除提示',e=>{
						if(e.index){
							_this.parents('li').remove()
							all_prices()
							$('#g_num').html($('.goods_list li').length)
						}
					})
				})
				
				//监听加商品
				$('.mui-btn-numbox-plus').click(function(){
					let num = $(this).prev().val()
					let price = parseFloat($(this).parents('.mui-table-view-cell').find('.unit_price').text())
					$(this).parents('.mui-table-view-cell').find('.total_price').html((num*price).toFixed(2))
					all_prices()
				})
				//监听减商品
				$('.mui-btn-numbox-minus').click(function(){
					let num = $(this).next().val()
					if(num<1){
						$(this).attr('disabled',true)
						$(this).next().val(1)
						return false
					}
					let price = parseFloat($(this).parents('.mui-table-view-cell').find('.unit_price').text())
					$(this).parents('.mui-table-view-cell').find('.total_price').html((num*price).toFixed(2))
					all_prices()
				})
				
				//提交事件
				$('#sub').click(()=>{
					mui.confirm('您确定购买吗？',e=>{
						if(e.index){
							$('form').submit()	
						}
					})
				})
			</script>
		</body>

</html>